<template>
	<view class="container">
		<view class="goodsList" v-if="data.type==1">
			<view class="goodBox" v-for="(item,index) in data.rewardGoods" :key="index"
				@click="$goURl(`/subPackages/commodity/details?id=${item.ID}`)">
				<view class="image">
					<image :src="item.index_img" mode="" v-if="item.index_img"></image>
					<image :src="item.img" mode="" v-else></image>
				</view>
				<view class="info">
					<view class="left">
						<view class="title">{{item.name}}</view>
						<view class="tip">{{item.title}}</view>
					</view>
					<view class="right">
						<view class="price" v-if="item.price>0 && item.coupon>0">
							<view style="font-size: 16px;"> ￥{{$toFiexd(item.price,2)}}</view>
							<view style="font-size: 14px;"> <text
									style="font-size: 12px; margin-right: 0;">积分</text>:{{item.coupon}}</view>
						</view>
						<view class="price" style="font-size: 16px;" v-else>
							{{item.price?'￥':'积分:'}}{{item.price || item.coupon }}
						</view>
						<view class="icon">
							<uni-icons type="cart" size="25" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goodsList" v-if="data.type==2">
			<view class="goodBox" v-for="(item,index) in data.rewardGoods" :key="index"
				@click="$goURl(`/subPackages/commodity/details?id=${item.ID}`)">
				<view class="image">
					<image :src="item.index_img" mode="" v-if="item.index_img"></image>
					<image :src="item.img" mode="" v-else></image>
				</view>
				<view class="info">
					<view class="left">
						<view class="title">{{item.name}}</view>
						<view class="tip">{{item.title}}</view>
					</view>
					<view class="right">
						<view class="price" v-if="item.price>0 && item.coupon>0">
							<view style="font-size: 16px;"> ￥{{$toFiexd(item.price,2)}}</view>
							<text style="font-size: 14px;"> <text
									style="font-size: 12px; margin-right: 0;">积分</text>:{{item.coupon}}</text>
						</view>
						<view class="price" style="font-size: 14px;" v-else>
							{{item.price?'￥':'积分:'}}{{item.price || item.coupon }}
						</view>
						<view class="icon">
							<uni-icons type="cart" size="25" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	const data = reactive({
		// 数据源
		type: 1,
		rewardGoods: [],
		partition: [],
	});
	onLoad((options) => {


		if(options.is_single == 1) {
			getRewardGoods()
			uni.setNavigationBarTitle({
				title: '精选好物'
			});
		}else{
			getRewardGoods_2()
			uni.setNavigationBarTitle({
				title: '复购享好礼'
			});
		}

		// data.type = options.type;
		// data.partition = JSON.parse(options.data);
		// console.log("options", data);
		// if (data.type == 1) {
		// 	uni.setNavigationBarTitle({
		// 		title: data.partition[2].name
		// 	});
		// 	getRewardGoods()
		// } else if (data.type == 2) {
		// 	getRewardGoods_2()
		// 	uni.setNavigationBarTitle({
		// 		title: data.partition[0].name
		// 	});
		// }
	});
	onShow(() => {
		console.log("onShow");
	});
	onPullDownRefresh(() => {});
	onReachBottom(() => {});
	//获取报单区商品
	function getRewardGoods() {
		proxy.$request({
			url: `api/goods_list_all/0/?page=1&size=999&is_single=1`,
			method: 'get',
			success(res) {
				if (res.errno == 0) {
					console.log("getRewardGoods", res.data.data);
					data.rewardGoods = res.data.data
				}
			}
		})
	}
	//获取有机蔬菜
	function getRewardGoods_2() {
		proxy.$request({
			url: `api/goods_list_all/0/?page=1&size=999&is_single=0`,
			method: 'get',
			success(res) {
				if (res.errno == 0) {
					console.log(res.data.data,'1322');
					data.rewardGoods = res.data.data
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.container {
		width: 100%;
		min-height: calc(100vh - 44px);
		background-color: #F5F5F5;

		.goodsList {
			width: 100%;
			height: 100%;
			padding-bottom: 20upx;

			.goodBox {
				width: 100%;
				height: 100%;
				padding: 20upx;
				margin-bottom: 20upx;
				border-radius: 10px;
				background-color: #fff;

				.image {
					width: 100%;
					height: 400upx;
					border-radius: 5px;

					image {
						width: 100%;
						height: 100%;
						border-radius: 5px;
					}
				}

				.info {
					width: 100%;
					height: 90upx;
					margin-top: 20upx;
					display: flex;
					justify-content: space-between;

					.left {
						width: 55%;
						// height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.title {
							width: 100%;
							// height: 100%;
							font-size: 16px;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							white-space: nowrap;
							-o-text-overflow: ellipsis;

						}

						.tip {
							width: 100%;
							// height: 100%;
							font-size: 12px;
							color: #e37d2a;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							white-space: nowrap;
							-o-text-overflow: ellipsis;
						}
					}

					.right {
						width: 45%;
						height: 100%;
						text-align: center;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.price {
							width: 60%;
							text-align: center;
							font-size: 18px;
							font-weight: bold;
							color: #ff5511;
						}

						.icon {
							width: 35%;
							height: 80%;
							text-align: center;
							font-size: 30upx;
							font-weight: bold;
							background-color: #1fd28f;
							border-radius: 5px;

							.uni-icons {
								width: 100%;
								height: 80%;
								text-align: center;
								line-height: 75upx;
								font-size: 30upx;
								font-weight: bold;
								color: #fff;
								margin-left: -5upx;
							}
						}
					}
				}
			}
		}
	}
</style>
